<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>权限管理 | vue-next-admin</title>
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <link rel="stylesheet" href="/vue-next-admin-doc-preview/assets/style.5cebb62a.css">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/Home.d1c70b92.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/AlgoliaSearchBox.56b5b4ad.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/app.9cc95a61.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_power_index.md.9b5ee6e9.lean.js">
    
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
  <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
  <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <meta name="twitter:title" content="权限管理 | vue-next-admin">
  <meta property="og:title" content="权限管理 | vue-next-admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-fcf5c4a8><div class="sidebar-button" data-v-fcf5c4a8><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-next-admin-doc-preview/" aria-label="vue-next-admin, back to home" data-v-fcf5c4a8 data-v-4424da2c><img class="logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt="Logo" data-v-4424da2c> vue-next-admin</a><div class="flex-grow" data-v-fcf5c4a8></div><div class="nav" data-v-fcf5c4a8><nav class="nav-links" data-v-fcf5c4a8 data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-34c05c3a><nav class="nav-links nav" data-v-34c05c3a data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-34c05c3a><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/">简介</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/menu/">菜单配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/layoutConfig/">布局配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/iconfont/">字体图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/server/">服务端交互</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/vuex/">vuex</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/build/">打包预览</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">高级</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-next-admin-doc-preview/config/power/">权限管理</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#页面权限">页面权限</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#角色权限标识">角色权限标识</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#过滤有权限路由">过滤有权限路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#权限路由执行顺序">权限路由执行顺序</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#按钮权限">按钮权限</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#组件方式">组件方式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#指令方式">指令方式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#函数方式">函数方式</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/route/">路由参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/i18n/">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tagsView/">标签页</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/directive/">内置指令</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其它</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/charts/">数据可视化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tool/">工具类集合</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/partyPlug/">第三方插件使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/builtPlug/">内置插件的使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/otherIssues/">其它问题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">赞助</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/support/">支持开源</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-1c2e469b><div class="container" data-v-1c2e469b><!--[--><!--]--><div style="position:relative;" class="content" data-v-1c2e469b><div><h1 id="权限管理" tabindex="-1">权限管理 <a class="header-anchor" href="#权限管理" aria-hidden="true">#</a></h1><h2 id="页面权限" tabindex="-1">页面权限 <a class="header-anchor" href="#页面权限" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">提示</p><p>不管是前端写路由还是后端接口返回路由，都会重新走 <a href="/config/power/#过滤有权限路由">页面权限-过滤有权限路由</a> 方法。</p></div><h3 id="角色权限标识" tabindex="-1">角色权限标识 <a class="header-anchor" href="#角色权限标识" aria-hidden="true">#</a></h3><blockquote><p>1.1、用户信息中的 <code>roles</code> 角色权限标识，用于 <code>/@/router/route.ts</code> 中的 <code>meta.roles</code> 获取当前用户角色权限标识去比对路由表，设置递归过滤有权限的路由。图片中所示数据为 <code>/@/views/login/component/account.vue</code> 前端写死模拟数据，可在浏览器 <code>F12</code>：<code>Application/Storage/Session Storage</code> 中的 <code>userInfo</code> 字段中查看。</p></blockquote><img src="https://img-blog.csdnimg.cn/618ad1d3fc2d41f8b0b5dcd345e544b3.png"><blockquote><p>1.2、<code>/@/router/route.ts</code> 文件。<a href="/config/menu/#参数说明">菜单配置-参数说明</a></p></blockquote><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  <span class="token operator">...</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">// 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common</span>
    roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="过滤有权限路由" tabindex="-1">过滤有权限路由 <a class="header-anchor" href="#过滤有权限路由" aria-hidden="true">#</a></h3><blockquote><p>1.1、递归过滤有权限的路由，代码位置：<code>/@/router/index.ts</code></p></blockquote><div class="language-ts"><pre><code><span class="token comment">/**
 * 判断路由 `meta.roles` 中是否包含当前登录用户权限字段
 * @param roles 用户权限标识，在 userInfos(用户信息)的 roles(登录页登录时缓存到浏览器)数组
 * @param route 当前循环时的路由项
 * @returns 返回对比后有权限的路由项
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">hasRoles</span><span class="token punctuation">(</span>roles<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> route<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>meta <span class="token operator">&amp;&amp;</span> route<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">)</span>
    <span class="token keyword">return</span> roles<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span>role<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> route<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>roles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 获取当前用户权限标识去比对路由表，设置递归过滤有权限的路由
 * @param routes 当前路由 children
 * @param roles 用户权限标识，在 userInfos(用户信息)的 roles(登录页登录时缓存到浏览器)数组
 * @returns 返回有权限的路由数组 `meta.roles` 中控制
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setFilterHasRolesMenu</span><span class="token punctuation">(</span>routes<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> roles<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> menu<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  routes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>route <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">hasRoles</span><span class="token punctuation">(</span>roles<span class="token punctuation">,</span> item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span>
        item<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token function">setFilterHasRolesMenu</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">,</span> roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
      menu<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> menu<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.2、方法调用，<code>rolesRoutes</code> 为根据角色权限标识处理后，返回有权限的路由数组</p></blockquote><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> dynamicRoutes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;/@/router/route&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> rolesRoutes <span class="token operator">=</span> <span class="token function">setFilterHasRolesMenu</span><span class="token punctuation">(</span>
  dynamicRoutes<span class="token punctuation">,</span>
  store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>roles
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="权限路由执行顺序" tabindex="-1">权限路由执行顺序 <a class="header-anchor" href="#权限路由执行顺序" aria-hidden="true">#</a></h3><blockquote><p>1.1、先添加动态路由 <code>router.addRoute</code>。您可能需要了解 <a href="https://next.router.vuejs.org/zh/api/#addroute" target="_blank" rel="noopener noreferrer">router.addRoute</a></p></blockquote><div class="language-ts"><pre><code><span class="token comment">/**
 * 添加动态路由
 * @method router.addRoute
 * @description 此处循环为 dynamicRoutes（/@/router/route）第一个顶级 children
 * 的路由一维数组，非多级嵌套
 * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setAddRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setFilterRouteEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> routeName<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> route<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>router<span class="token punctuation">.</span><span class="token function">hasRoute</span><span class="token punctuation">(</span>routeName<span class="token punctuation">)</span><span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span>route<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.2、后设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组。<code>setFilterHasRolesMenu</code> 为 <a href="/config/power/#过滤有权限路由">页面权限-过滤有权限路由</a> 方法</p></blockquote><div class="language-ts"><pre><code><span class="token comment">/**
 * 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）
 * 及缓存多级嵌套数组处理后的一维数组
 * @description 用于左侧菜单、横向菜单的显示
 * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setFilterMenuAndCacheTagsViewRoutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）</span>
  store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>
    <span class="token string">&quot;routesList/setRoutesList&quot;</span><span class="token punctuation">,</span>
    <span class="token function">setFilterHasRolesMenu</span><span class="token punctuation">(</span>
      dynamicRoutes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">,</span>
      store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>roles
    <span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 及缓存多级嵌套数组处理后的一维数组</span>
  <span class="token function">setCacheTagsViewRoutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="按钮权限" tabindex="-1">按钮权限 <a class="header-anchor" href="#按钮权限" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">数据获取</p><ul><li><p>1、按钮权限可在用户进行登录时，请求接口就返回全部按钮权限。</p></li><li><p>2、或者取 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/system/menu" target="_blank" rel="noopener noreferrer">菜单管理（演示）</a> 中的按钮 <code>权限标识</code>。</p></li></ul></div><h3 id="组件方式" tabindex="-1">组件方式 <a class="header-anchor" href="#组件方式" aria-hidden="true">#</a></h3><blockquote><p>组件位置：<code>/@/components/auth</code>，您可能需要了解 <a href="https://v3.cn.vuejs.org/guide/component-slots.html" target="_blank" rel="noopener noreferrer">插槽 slot</a></p></blockquote><p style="font-weight:bold;">一、单个权限验证（:value=&quot;xxx&quot;）</p><blockquote><p>1.1、组件代码，注意看 <code>some</code> 高亮处判断，根据需求适当时候需要自行修改</p></blockquote><div class="language-html"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserAuthBtnList<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;/@/store/index&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;auth&quot;</span><span class="token punctuation">,</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      value<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> String<span class="token punctuation">,</span>
        <span class="token function-variable function">default</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// 获取 vuex 中的用户权限</span>
      <span class="token keyword">const</span> getUserAuthBtnList <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>userInfos<span class="token punctuation">.</span>authBtnList<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>
          <span class="token punctuation">(</span><span class="token parameter">v<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> v <span class="token operator">===</span> props<span class="token punctuation">.</span>value
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        getUserAuthBtnList<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>1.2、页面中使用</p></blockquote><div class="language-html"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 使用 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Auth</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token comment">// 局部引入</span>
  <span class="token keyword">import</span> Auth <span class="token keyword">from</span> <span class="token string">&quot;/@/components/auth/auth.vue&quot;</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// 局部注册</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> Auth <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">二、多个权限验证，满足一个则显示（:value=&quot;[xxx,xxx]&quot;）</p><div class="language-html"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 使用 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Auths</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.addsss<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.delsss<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.linksss<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token comment">// 局部引入</span>
  <span class="token keyword">import</span> Auths <span class="token keyword">from</span> <span class="token string">&quot;/@/components/auth/auths.vue&quot;</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// 局部注册</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> Auths <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">三、多个权限验证，全部满足则显示（:value=&quot;[xxx,xxx]&quot;）</p><div class="language-html"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 使用 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AuthAll</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.del<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.link<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token comment">// 局部引入</span>
  <span class="token keyword">import</span> AuthAll <span class="token keyword">from</span> <span class="token string">&quot;/@/components/auth/authAll.vue&quot;</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// 局部注册</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> AuthAll <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="指令方式" tabindex="-1">指令方式 <a class="header-anchor" href="#指令方式" aria-hidden="true">#</a></h3><blockquote><p>指令位置：<code>/@/utils/authDirective.ts</code>，您可能需要了解 <a href="https://v3.cn.vuejs.org/guide/custom-directive.html" target="_blank" rel="noopener noreferrer">自定义指令 directive</a></p></blockquote><p style="font-weight:bold;">一、单个权限验证（v-auth=&quot;xxx&quot;）</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>新增<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>btn.del<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>btn.link<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">二、多个权限验证，满足一个则显示（v-auths=&quot;[xxx,xxx]&quot;）</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auths</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.addsss<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.delsss<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.linksss<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>新增<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auths</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.del<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.link<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">三、多个权限验证，全部满足则显示（v-auth-all=&quot;[xxx,xxx]&quot;）</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth-all</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.del<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.link<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>新增<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-auth-all</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>btn.add<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.edit<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.del<span class="token punctuation">&#39;</span>, <span class="token punctuation">&#39;</span>btn.link<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="函数方式" tabindex="-1">函数方式 <a class="header-anchor" href="#函数方式" aria-hidden="true">#</a></h3><blockquote><p>方法位置：<code>/@/utils/authFunction.ts</code>，用于方法中的判断，使用方法如下</p></blockquote><div class="language-ts"><pre><code><span class="token operator">&lt;</span>script lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span> setup<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ElMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;element-plus&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> auth<span class="token punctuation">,</span> auths<span class="token punctuation">,</span> authAll <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/utils/authFunction&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// 单个权限验证</span>
<span class="token keyword">const</span> <span class="token function-variable function">onAuthClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token string">&#39;btn.add&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> ElMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉，您没有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> ElMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;恭喜，您有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 多个权限验证，满足一个则为 true</span>
<span class="token keyword">const</span> <span class="token function-variable function">onAuthsClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">auths</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;btn.add&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;btn.edit&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> ElMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉，您没有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> ElMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;恭喜，您有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 多个权限验证，全部满足则为 true</span>
<span class="token keyword">const</span> <span class="token function-variable function">onAuthAllClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">authAll</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;btn.add&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;btn.edit&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> ElMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;抱歉，您没有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> ElMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;恭喜，您有权限！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div></div></div><footer class="page-footer" data-v-1c2e469b data-v-0673e034><div class="edit" data-v-0673e034><div class="edit-link" data-v-0673e034 data-v-8a069728><a class="link" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/config/power/index.md" target="_blank" rel="noopener noreferrer" data-v-8a069728>欢迎到 Gitee 上编辑此页！ <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-8a069728><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-0673e034><p class="last-updated" data-v-0673e034 data-v-90112f00><span class="prefix" data-v-90112f00>上次更新:</span><span class="datetime" data-v-90112f00></span></p></div></footer><div class="next-and-prev-link" data-v-1c2e469b data-v-7587c728><div class="container" data-v-7587c728><div class="prev" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/build/" data-v-7587c728><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-7587c728><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-7587c728>打包预览</span></a></div><div class="next" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/route/" data-v-7587c728><span class="text" data-v-7587c728>路由参数</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-7587c728><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_build_index.md\":\"cf908e9c\",\"config_builtplug_index.md\":\"6fbdc8f3\",\"config_charts_index.md\":\"6b253f7e\",\"config_directive_index.md\":\"eca8fc0a\",\"config_i18n_index.md\":\"52f920f7\",\"config_iconfont_index.md\":\"873ceaa3\",\"config_index.md\":\"17f09bd6\",\"config_layoutconfig_index.md\":\"713fd6e3\",\"config_menu_index.md\":\"ba743976\",\"config_otherissues_index.md\":\"bd715eeb\",\"config_partyplug_index.md\":\"99e0e69a\",\"config_power_index.md\":\"9b5ee6e9\",\"config_route_index.md\":\"0855307d\",\"config_server_index.md\":\"895abd2b\",\"config_support_index.md\":\"ba13e927\",\"config_tagsview_index.md\":\"7f3b9bdb\",\"config_tool_index.md\":\"b5e28201\",\"config_vuex_index.md\":\"0fa37ee1\",\"home_compatible_index.md\":\"7fe73f8e\",\"home_doc_index.md\":\"d5c819dd\",\"home_eslint_index.md\":\"de668d54\",\"home_fast_index.md\":\"716712dd\",\"home_forpeople_index.md\":\"8510cbe7\",\"home_gitpush_index.md\":\"d077e28a\",\"home_index.md\":\"1ee95fc1\",\"home_install_index.md\":\"41dfc4c6\",\"home_introduce_index.md\":\"4950d882\",\"home_prettier_index.md\":\"c5b741b5\",\"home_thank_index.md\":\"b63e2205\",\"home_vscode_index.md\":\"fc526584\",\"index.md\":\"56b80810\"}")</script>
    <script type="module" async src="/vue-next-admin-doc-preview/assets/app.9cc95a61.js"></script>
    
  </body>
</html>